<template>
    <div class="dataList">
        <div class="hdclass">
            <el-icon style="font-size: 20px">
                <Edit />
            </el-icon>
            数据列表
        </div>
        <div>
            <el-button type="primary" @click="tianjiaclick">添加</el-button>
        </div>
    </div>
    <!-- 带id跳转-->
    <div v-show="id">
        <el-table border style="width:100%" :data="tableData" class="borderyangshi">
            <el-table-column label="编号" prop="id" width="80"></el-table-column>
            <el-table-column label="分类名称" prop="name" width="100"></el-table-column>
            <el-table-column label="级别" width="100">
                <span>一级</span>
            </el-table-column>
            <el-table-column label="商品数量" prop="productCount" width="100"></el-table-column>
            <el-table-column label="数量单位" prop="productUnit" width="100"></el-table-column>
            <el-table-column label="导航栏" prop="description" width="120">
                <template #default="scope">
                    <el-switch :value="scope.row.navStatus === 1 ? true : false" @change="clickchange(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="是否显示" width="120">
                <template #default="scope">
                    <el-switch :value="scope.row.showStatus
                        === 1 ? true : false" @change="clickchange1(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="排序" prop="sort" width="100">
            </el-table-column>
            <el-table-column label="设置" prop="createTime" width="220">
                <template #default="scope">
                    <el-button @click="chakanxiaji(scope.row.id)">差看下级</el-button>
                    <el-button>转移商品</el-button>
                </template>

            </el-table-column>
            <el-table-column label="操作" prop="createTime">
                <template #default="scope">
                    <el-button @click="bianjihd(scope.row.id)">编辑</el-button>
                    <el-button type="danger" @click="removeClick(scope.row.id)">删除</el-button>
                </template>

            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination class="fenye" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
            background :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 页面   -->
    <div v-show="!id">
        <el-table border style="width:100%" :data="tableData" class="borderyangshi">
            <el-table-column label="编号" prop="id" width="80"></el-table-column>
            <el-table-column label="分类名称" prop="name" width="100"></el-table-column>
            <el-table-column label="级别" width="100">
                <span>二级</span>
            </el-table-column>
            <el-table-column label="商品数量" prop="productCount" width="100"></el-table-column>
            <el-table-column label="数量单位" prop="productUnit" width="100"></el-table-column>
            <el-table-column label="导航栏" prop="description" width="120">
                <template #default="scope">
                    <el-switch :value="scope.row.navStatus === 1 ? true : false" @change="clickchange(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="是否显示" width="120">
                <template #default="scope">
                    <el-switch :value="scope.row.showStatus
                        === 1 ? true : false" @change="clickchange1(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="排序" prop="sort" width="100">
            </el-table-column>
            <el-table-column label="设置" prop="createTime" width="220">
                <template #default="scope">
                    <el-button @click="chakanxiaji(scope.row.id)" disabled>差看下级</el-button>
                    <el-button>转移商品</el-button>
                </template>

            </el-table-column>
            <el-table-column label="操作" prop="createTime">
                <template #default="scope">
                    <el-button @click="bianjihd(scope.row.id)">编辑</el-button>
                    <el-button type="danger" @click="removeClick(scope.row.id)">删除</el-button>
                </template>

            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination class="fenye" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
            background :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from "vue"
import * as api from "../../request/api"
import useTabel from "../../hooks/useTables";
import dayjs from "dayjs";
import router from "../../router";
import { useRoute } from "vue-router";
import { bg, ta } from "element-plus/es/locale";
const route = useRoute()

let tianjiaclick = () => {
    router.push("/pms/addProductCate")
}
// 显隐切换
let clickchange = async (row: any) => {
    // 点击之后发起请求把hidden变成 0 显示|1 隐藏 这样实现点击切换
    // console.log(hidden);
    console.log("----------", row);
    if (row.navStatus == 0) {
        row.navStatus = 1
        await api.admin.adminupdateHidden(row)
        return
    }
    if (row.navStatus == 1) {
        row.navStatus = 0
        await api.admin.adminupdateHidden(row)
        return
    }
}
let clickchange1 = async (row: any) => {
    // 点击之后发起请求把hidden变成 0 显示|1 隐藏 这样实现点击切换
    // console.log(hidden);
    console.log("----------", row);
    if (row.showStatus == 0) {
        row.showStatus = 1
        await api.admin.adminupdateHidden(row)
        return
    }
    if (row.showStatus == 1) {
        row.showStatus = 0
        await api.admin.adminupdateHidden(row)
        return
    }
}
// 显示show
let id = ref(true)

// 请求
let { tableData, getTableData, pagination, handleSizeChange, handleCurrentChange } = useTabel(api.admin.getAdminproductCategory, {
    id: Number(route.query.id)
})
console.log("tableData", tableData);

// 编辑 分类
let bianjihd = (id: number) => {
    router.push(`/pms/updateProductCate?id=${id}`)
    let bianji = api.admin.getAdminattrInfo(id)
}
// 查看下级
let chakanxiaji = async (id: number) => {
    let productCount = await api.admin.getAdminproductCategory(id)
    console.log("productCount", productCount);
    router.push(`/pms/productCate?id=${id}`)
    setTimeout(() => {
        router.go(0)
    });

}
// let routeValuechange = ref(0)
watch(() => route.query.id,
    (newval) => {
        // routeValuechange.value + 1
        console.log(`${newval}`);
        // console.log("route.query.id", route.query.id);
        // 如果有query就把新的值赋值给id ,如果没有query 就让id为空
        if (route.query.id) {
            id.value = false
            getTableData()
            console.log(tableData.value)
        } else {
            id.value = true
        }
        // console.log("id", id);
    },
    { immediate: true }
)
// 删除
let removeClick = (id: number) => {
    console.log("id--------", id)
    let removeId = api.admin.adminproductCategorydelete(id)
    // bug点击两下才能刷新  ***
    setTimeout(() => {
        router.go(0)
    }, 0);
    // clearTimeout(dingshiqi)
}
</script>

<style lang="scss" scoped>
.dataList {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    box-shadow: 2px 2px 5px 2px #888888;
    margin: 20px;
}

.fenye {
    float: right;
    margin: 20px 0;
}

.borderyangshi {
    margin: 20px;
}
</style>